<template>
	<div class="banner">
		<!-- 轮播图 -->
		<div class="swiper details-banner-swiper" ref="banner_swiper">
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="(item,index) in imglist" :key="index">
					<img :src="item?item:getImg(item)" :onerror='item'>
				</li>
			</ul>
			<div class="swiper-pagination banner-swiper-pagination"></div>
		</div>
		<i class="iconfont icon-zuojiantou" style="left: 0.2rem;" @click="this.$router.go(-1)"></i>
		<router-link to="user">
			<i class="iconfont icon-yonghu" style="right: 0.2rem;"></i>
		</router-link>
		<div class="bottom">
			<section>
				<label>{{getType}}{{propdata.daysLabel?' · '+propdata.daysLabel:''}}</label>
				<span>{{swiperIndex}}/{{imglist.length}}</span>
			</section>
		</div>
	</div>
</template>

<script>
var that = null;
//引入Swiper滑动插件
import Swiper from 'swiper';
export default{
	name:'Banner',
	props:['propdata'],
	data(){
		return {
			swiperIndex:1,
			imglist:[]
		}
	},
	methods:{
		getImg(url){
			if(url && url !== undefined){
				let imgurl = url.substring(url.indexOf('https://')==0?8:7);
				return 'https://images.weserv.nl/?url='+imgurl;
			}
		}
	},
	watch:{
		propdata(){
			this.imglist = this.propdata.imglist;
			new Swiper('.details-banner-swiper',{
				on: {
					slideChangeTransitionEnd: function(){
					  that.swiperIndex = (this.activeIndex + 1);//切换结束时，告诉我现在是第几个slide
					},
				},
			});
		}
	},
	computed:{
		getType(){
			if(this.propdata.product_cate_type){
				return this.propdata.product_cate_type.join(" · ");
			}
			return "";
		}
	},
	beforeCreate() {
		that = this;
	},
	updated() {
		//获取Swiper的高度传给父元素
		let swiper_H = this.$refs.banner_swiper.offsetHeight;
		this.$emit('swiper_H',swiper_H)
	}
}
</script>

<style scoped>
.banner{
	position: relative;
}
a{
	text-decoration: none;
	color: black;
}
.swiper{
	width: 100%;
	display: flex;
	height: 5.5rem;
	overflow: hidden;
	text-align: center;
}
.swiper img{
	width: 100%;
	height: 100%;
}
.info{
	width: 100%;
	height: 5.5rem;
	top: 0;
	left: 0;
	z-index: 999;
	position: absolute;
}

.banner i{
	top: 0.5rem;
	position: absolute;
	z-index: 999;
	color: white;
	width: 0.75rem;
	height: 0.75rem;
	line-height: 0.75rem;
	border-radius: 50%;
	text-align: center;
	align-items: center;
	background-color: rgba(62, 62, 62, 0.5);
}
.banner .bottom{
	position: absolute;
	bottom: 0;
	height: 0.6rem;
	z-index: 999;
	width: 100%;
	color: white;
	overflow: hidden;
	background: linear-gradient(360deg,rgba(0,0,0,.5),rgba(0,0,0,0));
}
.banner .bottom section{
	width: 92%;
	height: 0.7rem;
	line-height: 0.85rem;
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.banner .bottom section span{
	display: inline-block;
	height: 0.45rem;
	line-height: 0.45rem;
	border-radius: 0.3rem;
	padding: 0 0.3rem;
	margin-bottom: 0.25rem;
	background-color: rgba(0,0,0,0.4);
}
</style>
